.g-upload {
  width: 100%;

  .n-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    margin-top: 3px;
    background: var(--datav-gui-component-bgcolor);

    &:hover {
      background: var(--datav-gui-component-bgcolor-hover);
    }
  }

  .n-upload-trigger,
  .n-upload-dragger,
  .n-spin-container,
  .n-spin-content,
  .g-upload-image-wrap {
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: transparent;
  }

  .g-upload-image-content {
    width: 100%;
    height: 100%;
    padding: 10px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .g-upload-image-cover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(0 0 0 / 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--datav-gui-font-color-base);

    span {
      cursor: pointer;

      &:hover {
        color: var(--datav-gui-hover-color);
      }
    }
  }

  .g-upload-tip {
    color: var(--datav-gui-font-color-base);
  }
}

.n-upload-dragger {
  border: 1px solid transparent;
  border-radius: 8px;
}
